<template>
  <div class="editor_main">
    <van-row class="editor_autofill" style="width:100%" v-if="allUserInfo">
      <van-col span="8">
        <span @click="auto_fill_handle">智能填写</span>
      </van-col>
      <slot name='btns'>
 
      </slot>
 
    </van-row>
    <van-row>
      <van-col span="24" class="van-ellipsis editor_title" @click="openDeleteKeyword" style="height: 12px;">
        <!-- 编辑一次永久快速填写:联系人{{ contact||''}} 手机号{{ phone || '' }} //@click="show_handle" -->
      </van-col>
    </van-row>
    <quill-editor class="ql-editor" :value="jobContent" ref="myQuillEditor" :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
    </quill-editor>
    <van-popup v-model="show" :style="{ height: 'auto', padding: '0.2rem', width: '90%' }" get-container="body">
      <van-form @submit="onSubmit" @failed="onFailed" scroll-to-error ref="reguserbox">
        <van-field v-model="contact" name="contact" autocomplete="off" label="联系人" required placeholder="请输入联系人（必填）"
          :rules="[{
            required: true, message: '联系人未填写'
          }]">
 
        </van-field>
        <van-field autocomplete="off" v-model="phone" name="phone" label="手机号" required placeholder="请输入手机号(必填)" :rules="[{
          required: true, message: '手机号未填写'
        }]">
 
        </van-field>
        <van-button type="info" block size="small">保存</van-button>
      </van-form>
    </van-popup>
    <com-keyword-popup v-model="showDeleteKeyword" key-name="删除库" prop-name="delete"
      prop-type="delete"></com-keyword-popup>
  </div>
</template>
 
<script>
 
import comKeywordPopup from './comAllTypeJobs/comKeywordPopup.vue';
import loginType from './comAllTypeJobs/loginType';
import {
  mapGetters
} from 'vuex'
import content from '../utils/content'
export default {
  components: {
    comKeywordPopup
  },
  data() {
    return {
      showDeleteKeyword: false,
      show: false,
      contact: '',
      phone: '',
      content: '<div></div>', //双向数据绑定数据
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            //['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            //  ['blockquote', 'code-block'], // 引用  代码块
            //   [{ header: 1 }, { header: 2 }], // 1、2 级标题
            //[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            //   [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            //   [{ indent: '-1' }, { indent: '+1' }], // 缩进
            //   [{ direction: 'rtl' }], // 文本方向
            //   [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
            //[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            //[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            //[{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
            //[{ align: [] }], // 对齐方式
            //['clean'], // 清除文本格式
            //   ['link', 'image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入招聘详情信息',
      }
    }
  },
  props: ['jobContent', 'isDisable'],
  computed: {
    ...mapGetters(['allUserInfo'])
  },
  mounted() {
    this.$refs.myQuillEditor.quill.enable(false);
    const val = localStorage.getItem('contactinfo')
    if (val) {
      let obj = JSON.parse(val);
      this.contact = obj.contact;
      this.phone = obj.phone;
    }
  },
  methods: {
    openDeleteKeyword() {
      if (loginType.isPrivateLogin())
        this.showDeleteKeyword = true;
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(event) {
      if (this.isDisable) {
        event.enable(false);
      } else {
        this.$refs.myQuillEditor.quill.enable(true)
      }
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange({
      quill,
      html,
      text
    }) {
      this.content = content.format(html)
      this.contentText = content.format(text)
      this.$emit('change', this.content)
    },
    show_handle() {
      this.$emit('fill_contact', {
        contact: this.contact,
        phone: this.phone
      });
      const val = localStorage.getItem('contactinfo');
      if (val) {
        let obj = JSON.parse(val);
        this.contact = obj.contact;
        this.phone = obj.phone;
      }
      this.show = true;
    },
    onSubmit(values) {
      let self = this;
      const val = localStorage.getItem('contactinfo');
      let obj = JSON.parse(val);
 
      localStorage.setItem("contactinfo", JSON.stringify({
        ...obj, contact: this.contact, phone: this.phone
      }));
      this.show = false;
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo.values)
      Toast('填写的信息可能有误！请上、下滑动进行检查。')
    },
    auto_fill_handle() {
      console.log(this.contentText)
      this.$emit('autoFill', this.contentText || '')
    },
  }
}
</script>
 
<style scoped>
.ql-editor {
  height: auto;
  background: #fff;
}
 
.ql-toolbar {
  height: 0;
  border-bottom: none;
}
 
.editor_main {
  position: relative;
}
 
.editor_title {
  color: red;
  position: absolute;
  top: 0.9rem;
  left: 0.6rem;
  font-size: 0.38rem;
  width: 88%;
}
 
.editor_autofill {
  font-size: 0.38rem;
  color: green;
  position: absolute;
  top: 0.1rem;
  left: 0rem;
  padding: 0 .5rem;
  box-sizing: border-box;
}
</style>
